<div class="layuimini-container layuimini-page-anim">
    <div class="layuimini-main">

        <fieldset class="table-search-fieldset">
            <legend>搜索信息</legend>
            <div>
                <form class="layui-form layui-form-pane" lay-filter="shelvestask-search-form" action="">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">任务状态</label>
                            <div class="layui-input-inline">
                                <select name="state" lay-verify="" lay-search="">
                                    <option value=""> -所有状态- </option>
                                    <option value="0">初始</option>
                                    <option value="1">等待采集完成</option>
                                    <option value="2">商品导入中</option>
                                    <option value="3">品牌类目设置</option>
                                    <option value="4">商品属性设置</option>
                                    <option value="5">等待上架</option>
                                    <option value="6">上架中</option>
                                    <option value="7">上架完成</option>
                                    <option value="8">发生异常</option>
                                </select>
                            </div>
                        </div>

                        <div class="layui-inline">
                            <label class="layui-form-label">任务名称</label>
                            <div class="layui-input-inline">
                                <input type="text" name="name" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button type="submit" class="layui-btn layui-btn-primary"  lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
                        </div>
                    </div>
                </form>
            </div>
        </fieldset>



        <table class="layui-hide" id="shelvestasksTableId" lay-filter="currentTableFilter"></table>

        <script type="text/html" id="shelvesTaskTableBar">
            <!-- 这里同样支持 laytpl 语法，如： -->
            {{#  if(d["state"] === "3"){ }}
            <a class="layui-btn layui-btn-xs" lay-event="brandcateexport">导出品类文件</a>
            <a class="layui-btn layui-btn-xs" lay-event="brandcateimport">导入品类文件</a>
            <a class="layui-btn layui-btn-xs" lay-event="next">设置完成</a>
            {{#  } }}

            {{#  if(d["state"] === "4"){ }}

            {{#  if(d["enable"] === "N"){ }}
            <a class="layui-btn layui-btn-xs" lay-event="attrsexport">导出属性文件</a>
            <a class="layui-btn layui-btn-xs" lay-event="attrsimport">导入属性文件</a>
            <a class="layui-btn layui-btn-xs" lay-event="start">启动上架</a>
            {{#  } }}

            {{#  if(d["enable"] === "Y"){ }}
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="stop">停止上架</a>
            {{#  } }}

            {{#  } }}


        </script>

    </div>
</div>

<script>
    layui.use(['form', 'table','miniPage','element', 'upload'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table,
            miniPage = layui.miniPage,
            upload = layui.upload;

        form.render();

        table.render({
            elem: '#shelvestasksTableId',
            url: 'common/shelvestasks',
            id: 'shelvestasksTableId',

            cols: [[
                {type: "checkbox", width: 50},
                {field: 'id', width: 240, title: 'ID', hide: true},
                {field: 'name', width: 240, title: '上架任务名称'},
                {field: 'state', width: 180, title: '上架任务状态', templet: function (d) {
                        return  {"0": "初始", "1": "等待采集完成", "2": "商品导入中", "3": "品牌类目设置", "4": "商品属性设置", "5": "等待上架", "6": "上架中", "7": "上架完成", "8": "<span style='color: red'>发生异常</span>"}[d["state"]] || '<span style="color: red">' + d["state"] + '</span>';
                    }
                },
                {field: 'remark', width: 400, title: '任务备注'},
                {field: 'createtime', width: 240, title: '创建时间'},
                {fixed: 'right', width:300, align:'center', toolbar: '#shelvesTaskTableBar'}
            ]],
            limits: [10, 15, 20, 25, 50, 100],
            limit: 15,
            page: true,
            skin: 'line'
        });

        // 监听搜索操作
        form.on('submit(data-search-btn)', function (data) {
            //执行搜索重载
            table.reload('shelvestasksTableId', {
                page: {curr: 1 },
                where: data.field
            }, 'data');

            return false;
        });

        //监听表格复选框选择
        table.on('checkbox(currentTableFilter)', function (obj) {
            console.log(obj)
        });

        table.on('tool(currentTableFilter)', function (obj) {
            debugger;

            switch(obj.event){
                case 'brandcateexport':
                    layer.open({
                        type: 2,
                        title: "请稍候...",
                        content: 'shelves/brandcatesetting/export?id=' + obj.data.id,
                    });
                    break;
                case 'brandcateimport':

                    layer.open({
                        type: 1,
                        area: ['500px', '300px'],
                        title: '',
                        content: '<fieldset class="layui-elem-field">\n' +
                        '  <div class="layui-field-box" id="title">\n' +
                        '    内容区域\n' +
                        '  </div>\n' +
                        '</fieldset>' +
                        '<div class="layui-upload-drag" style="width: 400px; margin: 0px 19px;">\n' +
                        '  <div class="layui-upload">\n' +
                        '   <button type="button" class="layui-btn layui-btn-normal" id="test8">选择文件</button>\n' +
                        '   <button type="button" class="layui-btn" id="test9">开始上传</button>\n' +
                        ' </div>\n' +
                        '</div>',
                        success: function(layero, index){
                            debugger;
                            $(layero).find("#title").html(obj.data.name);
                            console.log(layero, index);

                            //选完文件后不自动上传
                            upload.render({
                                elem: '#test8'
                                ,url: 'shelves/brandcatesetting/upload' //改成您自己的上传接口
                                ,auto: false
                                ,accept: 'file'
                                ,exts: 'xlsx'
                                //,multiple: true
                                , bindAction: '#test9'
                                , data: {
                                    id: obj.data.id
                                }
                                ,before: function(){
                                    layer.load(2);
                                }
                                ,done: function(res){
                                    layer.closeAll('loading');
                                    layer.msg( res["msg"] || '上传成功');
                                    console.log(res);
                                    if ( !!!res.code ) {
                                        layer.close(index);
                                    }
                                }
                                , error: function(){
                                    layer.closeAll('loading');
                                    layer.msg("上传接口异常");
                                }
                            });
                        }
                    });

                    break;
                case 'next':
                    $.ajax({
                        type: 'POST',
                        url: "shelves/brandcatesetting/next",
                        cache: false,
                        data: {id: obj.data.id},
                        success: function (result) {
                            if ( !!!result.code ) {
                                layer.msg('更新成功');
                                var data1 = form.val("shelvestask-search-form");
                                table.reload('shelvestasksTableId', { where: data1}, 'data');

                            } else {
                                alert(result.msg || "更新失败");
                            }
                        },
                        dataType: "json"
                    });
                    break;
                case 'attrsexport':
                    layer.open({
                        type: 2,
                        title: "请稍候...",
                        content: 'shelves/attrsetting/export?id=' + obj.data.id,
                    });
                    break;
                case 'attrsimport':
                    layer.open({
                        type: 1,
                        area: ['500px', '300px'],
                        title: '导入属性文件',
                        content: '<fieldset class="layui-elem-field">\n' +
                        '  <div class="layui-field-box" id="title">\n' +
                        '    \n' +
                        '  </div>\n' +
                        '</fieldset>' +
                        '<div class="layui-upload-drag" style="width: 400px; margin: 0px 19px;">\n' +
                        '  <div class="layui-upload">\n' +
                        '   <button type="button" class="layui-btn layui-btn-normal" id="test8">选择文件</button>\n' +
                        '   <button type="button" class="layui-btn" id="test9">开始上传</button>\n' +
                        ' </div>\n' +
                        '</div>',
                        success: function(layero, index){
                            debugger;
                            $(layero).find("#title").html(obj.data.name);
                            console.log(layero, index);

                            //选完文件后不自动上传
                            upload.render({
                                elem: '#test8'
                                ,url: 'shelves/attrsetting/upload' //改成您自己的上传接口
                                ,auto: false
                                ,accept: 'file'
                                ,exts: 'xlsx'
                                //,multiple: true
                                ,bindAction: '#test9'
                                , data: {
                                    id: obj.data.id
                                }
                                ,before: function(){
                                    layer.load(2);
                                }
                                ,done: function(res){
                                    layer.closeAll('loading');
                                    layer.msg( res["msg"] || '上传成功');
                                    console.log(res);
                                    if ( !!!res.code ) {
                                        layer.close(index);
                                    }
                                }
                                , error: function(){
                                    layer.closeAll('loading');
                                    layer.msg("上传接口异常");
                                }
                            });
                        }
                    });
                    break;
                case 'start':
                    $.ajax({
                        type: 'POST',
                        url: "shelves/attrsetting/startpush",
                        cache: false,
                        data: {id: obj.data.id},
                        success: function (result) {
                            if ( !!!result.code ) {
                                layer.msg( result.msg || '设置成功');
                                var data1 = form.val("shelvestask-search-form");
                                table.reload('shelvestasksTableId', { where: data1}, 'data');

                            } else {
                                alert(result.msg || "设置失败");
                            }
                        },
                        dataType: "json"
                    });
                    break;
                case 'stop':
                    $.ajax({
                        type: 'POST',
                        url: "shelves/attrsetting/stoppush",
                        cache: false,
                        data: {id: obj.data.id},
                        success: function (result) {
                            if ( !!!result.code ) {
                                layer.msg(result.msg || '设置成功');
                                var data1 = form.val("shelvestask-search-form");
                                table.reload('shelvestasksTableId', { where: data1}, 'data');

                            } else {
                                alert(result.msg || "设置失败");
                            }
                        },
                        dataType: "json"
                    });
                    break;
            }
        });

    });
</script>